<template>
    <div class="pubhead">
        <img src="./online.png" alt="" class="leftImg">
        <div class="routerLink">
            <div @click="changeActive(1)">
                <router-link  to="/home/city" :class="{active:cur==1}">同城</router-link>
            </div>
            <div @click="changeActive(2)">
                <router-link   to="/home" :class="{active:cur==2}">推荐</router-link>
            </div>
        </div>
        <img src="./search.png" alt="" class="rightImg">
    </div>
</template>

<script>
export default {
    data() {
        return {
            cur:2
        }
    },
    methods: {
        changeActive(cur){
            console.log(cur);
            this.cur = cur
        }
    },
}
</script>

<style scoped lang="less">
    .pubhead{
    height: 1rem;
    line-height: 1rem;
    position: relative;
    background: #f4d02b;
    .routerLink{
        font-size: .4rem;
        display: flex;
        justify-content: center;
        div:nth-last-of-type(2){
            margin:0 .3rem ;
        }
        a{
        text-decoration: none;
        color: gray;
        }
        .active{
            font-weight: bold;
        }
    }
        .leftImg{
            position: absolute;
            top: 50%;
            left:20px;
            transform: translateY(-50%);
        }
        .rightImg{
            position: absolute;
            top: 50%;
            right:20px;
            transform: translateY(-50%);
        }
    }
</style>